<template>
    <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="data in weddingDressinfo">
            <van-image width="10rem" height="10rem" radius="5px" :src="'/storage/images/' + data.dressphoto"
                @click="show.value = true, rentId.value = data.dressid, showImage.image = data.dressphoto"></van-image>
            <span>{{ data.dressname }}</span>
        </van-grid-item>
    </van-grid>
    <van-popup v-model:show="show.value" :style="{ width: '15rem', height: '18rem', }" round closeable
        close-icon="close">
        <van-image width="15rem" height="15rem" :src="'/storage/images/' + showImage.image" />
        <div>
            <van-cell center value="继续游览" @click="show.value = false"></van-cell>
            <van-cell center value="去预定" @click="$router.push('/Rent/' + rentId.value)"></van-cell>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios'

const show = reactive({ value: false });

const weddingDressinfo = ref()

const requestWeddingDressInfo = () => {
    axios.get('/api/home/responseWeddingDressInfo').then(res => {
        weddingDressinfo.value = res.data
    })
}
requestWeddingDressInfo()

// 点击窗口去预定的值
const rentId = reactive({ value: '' })

// 点击图片弹出层图片
const showImage = reactive({
    image: ''
})


</script>

<style scoped lang="scss">
.van-grid {
    margin-top: 3rem;
    width: 100%;
    height: calc(100% - 6rem);
    overflow: scroll;
    position: absolute;

    .van-grid-item {
        overflow: hidden;
    }

    :deep(.van-grid-item__content) {
        background-color: transparent;
    }
}

.van-popup {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;

    .van-image {
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }

    div {
        position: relative;
        display: flex;
        justify-content: space-around;

        .van-cell {
            width: 40%;
            margin-top: 1%;
            border-radius: 10%;
            background-color: rgb(11, 183, 235);
        }

        :deep(.van-cell__value--alone) {
            text-align: center;
        }
    }
}
</style>
